<script setup lang="ts">
import { computed } from "vue";
import { isReadonly } from "../FormItem";
import type {
  FormDesignerComponents,
  FormItemPerm
} from "../FormComponentMixin";

const props = defineProps({
  type: {
    type: String,
    default: ""
  },
  mode: {
    type: String,
    default: "normal" //组件模式，free设计模式，normal 编辑模式, read 阅读模式，disable 禁用模式
  }
});

const _value = defineModel<string>();
const config = defineModel<FormDesignerComponents>("config");
const perm = inject<Array<FormItemPerm>>("perm");
const emits = defineEmits(["change"]);
const type = computed(() => {
  switch (config.value.props.format) {
    case "YYYY":
      return "year";
    case "YYYY-MM":
      return "month";
    case "YYYY-MM-DD":
      return "date";
    case "YYYY-MM-DD HH:mm":
      return "datetime";
    default:
      return "datetime";
  }
});

const disabled = computed(() => {
  if (props.mode === "disable" && isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const readonly = computed(() => {
  if (props.mode === "read" || isReadonly(perm, config.value.code)) {
    return true;
  }
  return false;
});

const handleValueChange = val => {
  emits("change", config.value, val);
};
</script>

<template>
  <el-date-picker
    v-model="_value"
    :value-format="config.props.format"
    :format="config.props.format"
    clearable
    :type="type"
    :placeholder="config.props.placeholder"
    :disabled="disabled"
    :readonly="readonly"
    @change="handleValueChange"
  />
</template>

<style scoped></style>
